<template>
    <div>
        <Card shadow>
            <div class="search-con search-con-top">
                <ButtonGroup>
                    <Button :disabled="hasAuthority('YhfgconsultationEdit}')?false:true" class="search-btn" type="primary"
                            @click="handleModal()">
                        <span>添加</span>
                    </Button>
                </ButtonGroup>
            </div>
            <Table :columns="columns" :data="data" :loading="loading">
                <template slot="action" slot-scope="{ row }">
                    <a :disabled="hasAuthority('YhfgconsultationEdit')?false:true" @click="handleModal(row)">
                        编辑</a>&nbsp;
                    <Dropdown v-show="hasAuthority('YhfgconsultationEdit')" transfer ref="dropdown"
                              @on-click="handleClick($event,row)">
                        <a href="javascript:void(0)">
                            <span>更多</span>
                            <Icon type="ios-arrow-down"></Icon>
                        </a>
                        <DropdownMenu slot="list">
                            <DropdownItem name="remove">删除</DropdownItem>
                        </DropdownMenu>
                    </Dropdown>&nbsp;
                </template>
            </Table>
            <Page :total="pageInfo.total" :current="pageInfo.page" :page-size="pageInfo.limit" show-elevator show-sizer
                  show-total
                  @on-change="handlePage" @on-page-size-change='handlePageSize'></Page>
        </Card>
        <Modal v-model="modalVisible"
               :title="modalTitle"
               width="40"
               @on-cancel="handleReset">
            <div>
                <Form ref="form" :model="formItem" :rules="formItemRules" :label-width="100">
                            <FormItem label="" prop="creator">
                                <Input v-model="formItem.creator" placeholder="请输入内容"></Input>
                            </FormItem>
                            <FormItem label="" prop="createtime">
                                <Input v-model="formItem.createtime" placeholder="请输入内容"></Input>
                            </FormItem>
                            <FormItem label="" prop="updater">
                                <Input v-model="formItem.updater" placeholder="请输入内容"></Input>
                            </FormItem>
                            <FormItem label="" prop="updatetime">
                                <Input v-model="formItem.updatetime" placeholder="请输入内容"></Input>
                            </FormItem>
                            <FormItem label="" prop="name">
                                <Input v-model="formItem.name" placeholder="请输入内容"></Input>
                            </FormItem>
                            <FormItem label="" prop="tel">
                                <Input v-model="formItem.tel" placeholder="请输入内容"></Input>
                            </FormItem>
                            <FormItem label="" prop="content">
                                <Input v-model="formItem.content" placeholder="请输入内容"></Input>
                            </FormItem>
                            <FormItem label="" prop="subtime">
                                <Input v-model="formItem.subtime" placeholder="请输入内容"></Input>
                            </FormItem>
                            <FormItem label="" prop="replyname">
                                <Input v-model="formItem.replyname" placeholder="请输入内容"></Input>
                            </FormItem>
                            <FormItem label="" prop="replytel">
                                <Input v-model="formItem.replytel" placeholder="请输入内容"></Input>
                            </FormItem>
                            <FormItem label="" prop="replycontent">
                                <Input v-model="formItem.replycontent" placeholder="请输入内容"></Input>
                            </FormItem>
                            <FormItem label="" prop="replytime">
                                <Input v-model="formItem.replytime" placeholder="请输入内容"></Input>
                            </FormItem>
                            <FormItem label="" prop="replystate">
                                <Input v-model="formItem.replystate" placeholder="请输入内容"></Input>
                            </FormItem>
                            <FormItem label="" prop="replyunit">
                                <Input v-model="formItem.replyunit" placeholder="请输入内容"></Input>
                            </FormItem>
                            <FormItem label="" prop="transtime">
                                <Input v-model="formItem.transtime" placeholder="请输入内容"></Input>
                            </FormItem>
                            <FormItem label="" prop="transunit">
                                <Input v-model="formItem.transunit" placeholder="请输入内容"></Input>
                            </FormItem>
                            <FormItem label="" prop="rewardname">
                                <Input v-model="formItem.rewardname" placeholder="请输入内容"></Input>
                            </FormItem>
                            <FormItem label="" prop="filename">
                                <Input v-model="formItem.filename" placeholder="请输入内容"></Input>
                            </FormItem>
                            <FormItem label="" prop="replyunitid">
                                <Input v-model="formItem.replyunitid" placeholder="请输入内容"></Input>
                            </FormItem>
                            <FormItem label="" prop="transunitid">
                                <Input v-model="formItem.transunitid" placeholder="请输入内容"></Input>
                            </FormItem>
                            <FormItem label="" prop="businessuserid">
                                <Input v-model="formItem.businessuserid" placeholder="请输入内容"></Input>
                            </FormItem>
                </Form>
                <div class="drawer-footer">
                    <Button type="default" @click="handleReset">取消</Button>&nbsp;
                    <Button type="primary" @click="handleSubmit" :loading="saving">保存</Button>
                </div>
            </div>
        </Modal>
    </div>
</template>

<script>
    import yhfgconsultation from '@/api/yhfg/yhfgconsultation'

    export default {
        name: 'yhfgconsultation',
        data() {
            return {
                loading: false,
                saving: false,
                modalVisible: false,
                modalTitle: '',
                pageInfo: {
                    total: 0,
                    page: 1,
                    limit: 10
                },
                formItemRules: {
                    name:
                    [
                        {required: true, message: '不能为空', trigger: 'blur'}
                    ],
                    tel:
                    [
                        {required: true, message: '不能为空', trigger: 'blur'}
                    ],
                    content:
                    [
                        {required: true, message: '不能为空', trigger: 'blur'}
                    ]
        },
            formItem: {
                    name: '咨询人（微信号）',
                    tel: '咨询人电话',
                    content: '咨询内容',
                    subtime: '提交日期',
                    replyunit: '回复单位',
                    replyname: '回复人',
                    replytel: '回复人电话',
                    replytime: '回复日期',
                    transtime: '转办时限',
                    transunit: '转办单位'
            }
        ,
            columns: [
                        {
                            title: '咨询人（微信号）',
                            key: 'name',
                            width: 200,
                           fixed: 'left',
                          render: (h, params) => {
                            return h('div', [
                              h('Icon', {
                                props: {
                                  type: 'person'
                                }
                              }),
                              h('strong', params.row.name)
                            ]);
                          }
                        },
                        {
                            title: '咨询人电话',
                            key: 'tel',
                            width: 200,
                            fixed: 'left'
                        },
                        {
                            title: '咨询内容',
                            key: 'content',
                            width: 400
                        },
                        {
                            title: '提交日期',
                            key: 'subtime',
                          width: 200
                        },
                        {
                            title: '回复单位',
                            key: 'replyunit',
                          width: 200
                        },
                        {
                            title: '回复人',
                            key: 'replyname',
                          width: 100
                        },
                        {
                            title: '回复人电话',
                            key: 'replytel',
                          width: 100
                        },
                        {
                            title: '回复日期',
                            key: 'replytime',
                          width: 100
                        },
                        {
                            title: '转办时限',
                            key: 'transtime',
                             width: 200,
                             fixed: 'right'
                        },
                  {
                title: '操作',
                key: 'action',
                width: 150,
                align: 'center',
              fixed: 'right' ,
                render: (h, params) => {
                  return h('div', [
                    h('Button', {
                      props: {
                        type: 'primary',
                        size: 'small'
                      },
                      style: {
                        marginRight: '5px'
                      },
                      on: {
                        click: () => {
                          this.show(params.index)
                        }
                      }
                    }, '编辑'),
                    h('Button', {
                      props: {
                        type: 'error',
                        size: 'small'
                      },
                      on: {
                        click: () => {
                          this.remove(params.index)
                        }
                      }
                    }, '删除')
                  ]);
                }
              }
            ],
                    data
        :
            []
        }
        },
        methods: {
            handleModal(data) {
                if (data) {
                    this.modalTitle = '编辑'
                    this.formItem = Object.assign({}, this.formItem, data)
                } else {
                    this.modalTitle = '添加'
                }
                this.modalVisible = true
            },
            handleReset() {
                const newData = {
                    name: '',
                    tel: '',
                    content: '',
                    subtime: '',
                    replyunit: '',
                    replyname: '',
                    replytel: '',
                  replycontent: '',
                  replytime: '',
                  transtime: '',
                  transunit: ''
            }
                this.formItem = newData
                //重置验证
                let form = this.refs['form']
                form.resetFields()
                this.modalVisible = false
                this.saving = false
            },
            handleSubmit() {
                let form = this.refs['form']
                form.validate((valid) => {
                    if (valid) {
                        this.saving = true
                        if (this.formItem.id) {
                          yhfgconsultation.
                            update(this.formItem).then(res => {
                                if (res.code === 0) {
                                    this.$Message.success('保存成功')
                                    this.handleReset()
                                }
                                this.handleSearch()
                            }).finally(() => {
                                this.saving = false
                            })
                        } else {
                          yhfgconsultation.
                            add(this.formItem).then(res => {
                                this.handleReset()
                                this.handleSearch()
                                if (res.code === 0) {
                                    this.$Message.success('保存成功')
                                }
                            }).finally(() => {
                                this.saving = false
                            })
                        }
                    }
                })
            },
            handleSearch(page) {
                if (page) {
                    this.pageInfo.page = page
                }
                this.loading = true
              yhfgconsultation.list({page: this.pageInfo.page, limit: this.pageInfo.limit}).then(res => {
                debugger;
                    this.data = res.data.records
                    this.pageInfo.total = parseInt(res.data.total)
                }).finally(() => {
                    this.loading = false
                })
            },
            handlePage(current) {
                this.pageInfo.page = current
                this.handleSearch()
            },
            handlePageSize(size) {
                this.pageInfo.limit = size
                this.handleSearch()
            },
            handleRemove(data) {
                let modal = this.$Modal
                modal.confirm({
                    title: '确定删除吗？',
                    onOk: () => {
                      yhfgconsultation.
                        remove(data.id).then(res => {
                            if (res.code === 0) {
                                this.pageInfo.page = 1;
                                this.$Message.success('删除成功');
                            }
                            this.handleSearch();
                        })
                    }
                })
            },
            handleClick(name, row) {
                switch (name) {
                    case 'remove':
                        this.handleRemove(row)
                        break
                }
            }
        },
        mounted: function () {
            this.handleSearch()
        }
    }
</script>
